<template>
  <div class="order-detail">
    <div class="content">
      <section class="status">
        <span>{{ changeStatus() }}</span>
        <span
          class="text"
          v-if="data.pay_status === 1 && data.order_status === 1"
          >订单将于24小时内自动关闭</span
        >
      </section>
      <section class="address">
        <md-cell-item
          :title="data.receiver + ' ' + data.mobile"
          :brief="data.address"
        >
          <span class="holder" slot="left">
            <span class="iconfont iconshouhuodizhi"></span>
          </span>
        </md-cell-item>
      </section>
      <section class="address">
        <md-cell-item title="商品详情">
          <div slot="children" class="children">
            <div
              class="goods"
              v-for="(item, index) in data.product"
              :key="index"
              @click="$commonJs.goPage('goodsDetail', item.product_id)"
            >
              <img
                :src="$api.imgUrl + JSON.parse(item.product_img)[0]"
                alt=""
              />
              <div class="detail">
                <span class="name">{{ item.product_name }}</span>
                <span class="brand">规格：{{ item.size }}</span>

                <span class="price"
                  >￥<md-amount
                    :value="parseFloat(item.product_price)"
                    has-separator
                  ></md-amount
                ></span>
              </div>
              <div class="price-box">
                <span class="count">x{{ item.num }}</span>
              </div>
            </div>
            <div class="footer">
              共{{ data.product.length }}件商品 合计：<span class="price"
                >￥<md-amount
                  :value="parseFloat(data.money)"
                  has-separator
                ></md-amount
              ></span>
            </div>
          </div>
        </md-cell-item>
      </section>
      <section class="address">
        <md-cell-item title="订单信息">
          <div slot="children" class="children">
            <md-detail-item title="订单编号:" :content="data.order_num" />
            <md-detail-item title="创建时间" :content="data.create_time" />
            <md-detail-item
              v-if="data.order_status === 3"
              title="取消时间"
              :content="data.update_time"
            />
          </div>
        </md-cell-item>
      </section>
    </div>
    <div v-if="showFooter" class="btn-box">
      <div class="btn-wrapper">
        <md-button
          style="margin-right: 24px"
          v-if="data.pay_status === 1 && data.order_status === 1"
          type="default"
          plain
          round
          inline
          @click="cancelOrder(data.id)"
          >取消订单</md-button
        >
        <md-button
          v-if="data.pay_status === 1 && data.order_status === 1"
          type="default"
          plain
          round
          inline
          @click="pay(data.order_num)"
          >去付款</md-button
        >
        <md-button
          v-if="
            (data.pay_status === 2 || data.pay_status === 5) &&
              data.order_status === 5
          "
          type="default"
          plain
          round
          inline
          @click="confirmOrder(data.id)"
          >确认收货</md-button
        >
        <md-button
          v-if="data.eval_state === 0 && data.order_status === 2"
          type="default"
          plain
          round
          inline
          @click="$commonJs.goPage('addComment', data.id)"
          >去评价</md-button
        >
        <md-button
          v-if="
            data.order_status === 3 ||
              (data.eval_state === 1 && data.order_status === 2)
          "
          type="default"
          plain
          round
          inline
          @click="delOrder(info.id)"
          >删除订单</md-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  Dialog,
  CellItem,
  ActionBar,
  Amount,
  DetailItem,
  Button
} from "mand-mobile";
export default {
  name: "login",
  components: {
    [Dialog.name]: Dialog,
    [DetailItem.name]: DetailItem,
    [Amount.name]: Amount,
    [ActionBar.name]: ActionBar,
    [Button.name]: Button,
    [CellItem.name]: CellItem
  },
  data() {
    return {
      data: {},
      showFooter: false
    };
  },
  methods: {
    changeStatus() {
      if (this.data.pay_status === 1 && this.data.order_status === 1) {
        this.showFooter = true;
        return "等待买家付款";
      } else if (
        (this.data.pay_status === 2 || this.data.pay_status === 5) &&
        this.data.order_status === 1
      ) {
        this.showFooter = false;
        return "买家已付款";
      } else if (
        (this.data.pay_status === 2 || this.data.pay_status === 5) &&
        this.data.order_status === 5
      ) {
        this.showFooter = true;
        return "订单已发货";
      } else if (this.data.order_status === 3) {
        this.showFooter = true;
        return "交易关闭";
      } else if (this.data.eval_state === 0) {
        this.showFooter = true;
        return "订单待评价";
      } else if (this.data.eval_state === 1) {
        this.showFooter = true;
        return "交易成功";
      }
    },
    cancelOrder(id) {
      this.$ajax
        .post(
          this.$api.cancelOrder,
          {
            order_id: id
          },
          false
        )
        .then(() => {
          this.getInfo();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    pay(orderNum) {
      this.$ajax
        .post(
          this.$api.goPay,
          {
            order_num: orderNum
          },
          false
        )
        .then(() => {
          let obj = {
            order_num: orderNum
          };
          this.$store.dispatch("changeOrder", obj);
          this.$commonJs.goPage("shoppingPayMethod");
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    confirmOrder(id) {
      Dialog.confirm({
        title: "确认收货",
        content: "请确认是否已收到商品",
        confirmText: "确定",
        onConfirm: () => {
          this.$ajax
            .post(
              this.$api.confirmOrder,
              {
                order_id: id
              },
              false
            )
            .then(() => {
              this.$toast.succeed("确认收货成功");
              this.$emit("refresh");
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    },
    delOrder(id) {
      Dialog.confirm({
        title: "删除订单",
        content: "请确认是否进行操作",
        confirmText: "确定",
        onConfirm: () => {
          this.$ajax
            .post(
              this.$api.deleteOrder,
              {
                order_id: id
              },
              false
            )
            .then(() => {
              this.$toast.succeed("删除订单成功");
              this.$route.go(-1);
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    },
    getInfo() {
      this.$ajax
        .post(
          this.$api.orderDetail,
          {
            order_id: this.$route.params.id
          },
          false
        )
        .then(res => {
          this.data = res.data.data;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="stylus">
.order-detail{
  height: 100%;
  flex_content();
  flex_column();
}
  .content{
    flex: auto;
    height: 100%;
    overflow: auto;
    background #f0f0f0;
    .status{
      height 192px
      padding 0 24px
      flex_content()
      flex_column()
      flex_justify_center()
      background #317EB9
      color white
      font-size:30px;
      .text{
        font-size:24px;
        display inline-block
        margin-top 24px
      }
    }
    .iconfont{
      font-size 40px
      color #317EB9
    }
    .address{
      background white
      padding 0 24px
      margin-bottom 22px
    }
    .goods{
      flex_content();
      font-size 18px;
      line-height 50px
      padding-bottom 24px
      img{
        width 174px
        height 174px
        margin-right 23px
      }
      .detail{
        flex_one();
        flex_content();
        flex_column();
        flex_justify_space()
        .price{
          font-size:26px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(51,51,51,1);
        }
        .name{
          font-size:26px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(0,0,0,1);
        }
        .brand{
          font-size:26px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
        }
      }
      .price-box{
        width 120px
        height 174px
        text-align right
        flex_content();
        flex_column();
        flex_justify_space()
        .count{
          font-size:26px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(153,153,153,1);
        }
        .status{
          font-size:20px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color #ED7218
          span{
            display inline-block
            padding  0 24px
            border 1px solid #ED7218
          }
        }
      }
    }
    .footer{
      font-size:24px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(102,102,102,1);
      line-height:43px;
      text-align right
      .price{
        color #ED7218
      }
    }
  }

.btn-box{
  height 98px
  background #ffffff
  flex_content()
  flex_column()
  flex_justify_center()
  padding 0 24px
  .btn-wrapper{
    text-align right
  }
}
</style>
